<div>

  <div class="heading">
    <div class="description">
      <h1>Batch Job Executions</h1>
      <p>
        This section lists all available batch job executions and provides the control to restart a job execution (if
        restartable).
      </p>
    </div>

    <div class="actions text-right">
      <button name="refresh" type="button" (click)="loadJobExecutions()"
              class="btn btn-default btn-icon" style="padding:0 10px;">
        <span class="glyphicon glyphicon-refresh"></span>
      </button>
    </div>

  </div>

  <table id="tableJobs" *ngIf="jobExecutions?.items && jobExecutions.items.length > 0"
         class="table table-hover table-actions">
    <thead>
    <tr>
      <th style="width: 100px">Execution Id</th>
      <th>Name</th>
      <th style="width: 100px">Task Id</th>
      <th style="width: 100px">Instance Id</th>
      <th style="width: 200px">Job Start Time</th>
      <th style="width: 150px" nowrap="">Step Execution Count</th>
      <th style="width: 100px">Status</th>
      <th>&nbsp;</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of jobExecutions.items | paginate: jobExecutions.getPaginationInstance(); index as i">
      <td>
        {{ item.jobExecutionId }}
      </td>
      <td>
        <a style="cursor: pointer" (click)="viewJob(item)">{{ item.name }}</a>
        <app-definition-status [jobExecution]="item"></app-definition-status>
      </td>
      <td>
        <a style="cursor: pointer" (click)="viewTask(item)">{{ item.taskExecutionId }}</a>
      </td>
      <td>{{ item.jobInstanceId }}</td>
      <td>{{ item.startTimeFormatted }}</td>
      <td>{{ item.stepExecutionCount }}</td>
      <td>
        <app-job-execution-status [status]="item.status"></app-job-execution-status>
      </td>
      <td class="table-actions" width="80px" nowrap="">
        <div class="actions" role="group">
          <button type="button" (click)="restartJob(item)" name="job-restart{{ i }}"
                  class="btn btn-default" title="Restart" [disabled]="!item.restartable">
            <span class="glyphicon glyphicon-repeat"></span>
          </button>
          <button type="button" (click)="stopJob(item)" [disabled]="!item.stoppable" name="job-stop{{ i }}"
                  class="btn btn-default" title="Stop">
            <span class="glyphicon glyphicon-stop"></span>
          </button>
          <button type="button" (click)="viewJob(item)" name="job-details{{ i }}"
                  class="btn btn-default" title="Details">
            <span class="glyphicon glyphicon-search"></span>
          </button>
        </div>
      </td>
    </tr>
    </tbody>
  </table>

  <div class="row">
    <div class="col-xs-12">
      <div id="pagination" *ngIf="jobExecutions && jobExecutions.totalPages > 1">
        <pagination-controls *ngIf="jobExecutions?.items && jobExecutions.items.length > 0"
                             (pageChange)="getPage($event)"></pagination-controls>
      </div>
    </div>
    <div class="col-xs-12" *ngIf="jobExecutions && jobExecutions?.totalElements > 0">
      <app-pager [page]="params.page" [total]="jobExecutions.totalElements" [size]="params.size"
                 (sizeChange)="changeSize($event)">
      </app-pager>
    </div>
  </div>

  <div id="empty" *ngIf="isJobEmpty()">
    <div class="alert alert-warning" style="display:inline-block;margin:0 auto">
      <strong>No Job Executions available.</strong>
    </div>
  </div>

</div>
